<#include "/oms/iframe/common/head_index.html" />
<@dictionary type="function" fields="Status"></@dictionary>
<@dictionary type="listjson" fields="Status"></@dictionary>
<link rel="stylesheet" href="${request.contextPath}/static/oms/default/plugins/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">博客管理</h3>
				<div class="box-tools pull-right">
					<@shiro.hasPermission name="blog:content:create">
						<a class="btn btn-sm btn-primary"  title="添加博客" target="modal" modal="lg" href="${request.contextPath}/oms/blog/content/add">添加</a>
					</@shiro.hasPermission>
				</div>
			</div>
			<div class="box-body">
				<div class="clearfix">
					<form id="search-form" class="form-horizontal" >
						<div class="form-group">
							<div class="col-sm-3">
								<div class="input-group">
									<input type="hidden" class="form-control blogIndustryId"  name="blogIndustryId"  value="" >
									<input type="text" class="form-control blogIndustryName" value="" readonly="readonly" placeholder="选择所属类别...">
									<span class="input-group-addon"><i class="glyphicon glyphicon-remove blogIndustryIdClear" style="color: #FF0000;" ></i></span>
									<div  class="blogIndustryContent" style="position: absolute; left: 0; top: 25px; display: none;z-index: 999999;">
										<ul class="ztree blogIndustryTree" style="margin-top: 10px;
																border: 1px solid #d6e0df;
																background: #fbfbfb;
																width: 220px;
																height: 360px;
																overflow-y: scroll;
																overflow-x: auto; -moz-user-select: none;">
										</ul>
									</div>
								</div>
							</div>
							<div class="col-md-2">
								<div class="input-group">
									<span class="input-group-addon"><i class="fa fa-user"></i></span>
									<input type="text" class="form-control" name="username" value="${username}" placeholder="用户名搜索...">
								</div>
							</div>
							<div class="col-sm-3">
								<div class="input-group">
									<input type="hidden" class="form-control blogCategoryId"  name="blogCategoryId"  value="" >
									<input type="text" class="form-control blogCategoryName"  id="" readonly value="" placeholder="选择所属类别...">
									<span class="input-group-addon"><i class="glyphicon glyphicon-remove blogCategoryIdClear" style="color: #FF0000;" ></i></span>
									<div  class="blogCategoryContent" style="position: absolute; left: 0; top: 25px; display: none;z-index: 999999;">
										<ul class="ztree blogCategoryTree" style="margin-top: 10px;
																border: 1px solid #d6e0df;
																background: #fbfbfb;
																width: 220px;
																height: 360px;
																overflow-y: scroll;
																overflow-x: auto; -moz-user-select: none;">
										</ul>
									</div>
								</div>
							</div>
							<div class="col-md-3">
								<div class="input-group">
									<span class="input-group-addon"><i class="fa fa-search"></i></span>
									<input type="text" class="form-control" name="title" placeholder="根据标题搜索...">
								</div>
							</div>
						</div>
						<div class="form-group">
							<div class="col-md-2">
								<div class="input-group date ">
									<div class="input-group-addon">
										<i class="fa fa-calendar"></i>
									</div>
									<input type="text"  class="form-control pull-right" name="beginCreateTime" placeholder="选择开始时间...">
								</div>
							</div>
							<div class="col-md-2">
								<div class="input-group date ">
									<div class="input-group-addon">
										<i class="fa fa-calendar"></i>
									</div>
									<input type="text" class="form-control pull-right" name="endCreateTime" placeholder="选择结束时间...">
								</div>
							</div>
							<div class="col-md-2">
								<button type="button"  class="btn btn-primary btn-grid-refresh">搜索</button>
							</div>
						</div>
					</form>
				</div>
				<div class="clearfix">
					<table id="dataGrid" class="table table-bordered table-striped">

					</table>
				</div>
			</div>
		</div>
	</div>
</div>
<#include "/oms/iframe/common/setting_index.html" />
<#include "/oms/iframe/common/bottom_index.html" />
<script type="text/javascript" src="${request.contextPath}/static/oms/default/plugins/zTree/jquery.ztree.all.js"></script>
<script type="text/javascript">

    var $searchForm=$("#search-form");
    var setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "parentId",
                rootPId: null
            }
        },
        async: {
            enable: true,
            url:"/oms/blog/industry/tree",
            dataFilter:function (treeId, parentNode, responseData) {
                if (responseData) {
                    for(var i =0; i < responseData.length; i++) {
                        responseData[i].url = null;
                    }
                }
                return responseData;
            }
        },
        callback:{
            onAsyncSuccess:function (event, treeId) {
                var node = $.fn.zTree.getZTreeObj(treeId).getNodeByParam("id", $searchForm.find(".blogIndustryId").val());
                if(node){
                    $searchForm.find(".blogIndustryName").val(node.name);
                }
            },
            onClick :function (event, treeId, treeNode) {
                $searchForm.find(".blogIndustryId").val(treeNode.id);
                $searchForm.find(".blogIndustryName").val(treeNode.name);
                $searchForm.find(".blogIndustryContent").hide();
            }
        }
    };
    $searchForm.find(".blogIndustryName").on('click',function () {
        var $blogIndustryContent = $searchForm.find('.blogIndustryContent');
        $blogIndustryContent.css("display")==='none'?$blogIndustryContent.show():$blogIndustryContent.hide();
    });
    $searchForm.find(".blogIndustryContent").mouseleave(function () {
        $searchForm.find('.blogIndustryContent').hide();
    });

    $searchForm.find(".blogIndustryIdClear").on('click',function () {
        $searchForm.find(".blogIndustryId").val("");
        $searchForm.find(".blogIndustryName").val("");
    });


    var settingCategory = {
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "parentId",
                rootPId: null
            }
        },
        async: {
            enable: true,
            url:"/oms/blog/category/tree",
            dataFilter:function (treeId, parentNode, responseData) {
                if (responseData) {
                    for(var i =0; i < responseData.length; i++) {
                        responseData[i].url = null;
                    }
                }
                return responseData;
            }
        },
        callback:{
            onAsyncSuccess:function (event, treeId) {
                var node = $.fn.zTree.getZTreeObj(treeId).getNodeByParam("id", $searchForm.find(".blogIndustryId").val());
                if(node){
                    $searchForm.find(".blogCategoryName").val(node.name);
                }
            },
            onClick :function (event, treeId, treeNode) {
                $searchForm.find(".blogCategoryId").val(treeNode.id);
                $searchForm.find(".blogCategoryName").val(treeNode.name);
                $searchForm.find(".blogCategoryContent").hide();
            }
        }
    };
    $searchForm.find(".blogCategoryName").on('click',function () {
        var $blogCategoryContent = $searchForm.find('.blogCategoryContent');
        $blogCategoryContent.css("display")==='none'?$blogCategoryContent.show():$blogCategoryContent.hide();
    });
    $searchForm.find(".blogCategoryContent").mouseleave(function () {
        $searchForm.find('.blogCategoryContent').hide();
    });

    $searchForm.find(".blogCategoryIdClear").on('click',function () {
        $searchForm.find(".blogCategoryId").val("");
        $searchForm.find(".blogCategoryName").val("");
    });

    $searchForm.find('[name="username"]').on('blur',function () {
        var $this = $(this);
        var $ztreeObj = $searchForm.find('.blogCategoryTree');
        if($this.val()){
            settingCategory.async.url="/oms/blog/category/tree?username="+$this.val();
            $.fn.zTree.init($ztreeObj, settingCategory);
        }else{
            $searchForm.find(".blogCategoryId").val("");
            $searchForm.find(".blogCategoryName").val("");
            settingCategory.async.url="";
            $.fn.zTree.init($ztreeObj, settingCategory);
        }
    });

	$(".btn-grid-refresh").on("click",function () {
        dataGridReload();
    });
	function dataGridReload(){
		$("#dataGrid").bootstrapTable('refresh');
	}
	$dataGrid = $("#dataGrid");
    $(function () {
        $.fn.zTree.init($searchForm.find('.blogIndustryTree'), setting);
    	$.datetimepicker.setLocale('ch');
		//初始化时间选择器
		$('[name=beginCreateTime]').datetimepicker({
			format:"Y/m/d 00:00:00",      //格式化日期
			timepicker:true,    //开启时间选项
			yearStart:2000,     //设置最小年份
			yearEnd:2050,        //设置最大年份
			todayButton:false    //关闭选择今天按钮
		});

		//初始化时间选择器
		$('[name=endCreateTime]').datetimepicker({
			format:"Y/m/d 23:59:59",      //格式化日期
			timepicker:true,    //开启时间选项
			yearStart:2000,     //设置最小年份
			yearEnd:2050,        //设置最大年份
			todayButton:false    //关闭选择今天按钮
		});

        initDataGrid();
    });
    function initDataGrid(){

        $dataGrid.bootstrapTable({
            idField : "id",
            columns : [[
                {title: "标题", field: "title" },
                {title: "短标题", field: "shortTitle" },
                {title: "点击量", field: "clickCount" },
                {title: "创建人", field: "createBy"},
                {title: "创建时间", field: "createTime", sortable: true,formatter:dateFormat},
                {title: "操作", field: "operate", align: 'center',formatter: operateFormatter}
            ]],
            url : '/oms/blog/content/query',
            queryParams: function(params){
            	var searchForm = $("#search-form");
				var formData = searchForm.serializeObject();
				if(params.sort){
					formData["sort"]=params.sort;
					formData["order"]=params.order;
				}
				formData["offset"]=params.offset;
				formData["limit"]=params.limit;

                return formData;
            },
            responseHandler : function (res) {
                return {
                    rows : res.rows,
                    total : res.total
                }
            },
            search : false,
            searchOnEnterKey : false,
            sortName : 'createdTime',
            sortOrder : 'asc',
            pagination : true,
            sidePagination : 'server',
            pageSize: 10,
            pageList : [10,20, 40, 50, 100],
            showRefresh : true,
            showToggle : true
        });
    }

    function operateFormatter(value, row, index) {
        return [
            '<a class="btn btn-sm btn-info "  title="查看" target="modal" modal="lg" href="${request.contextPath}/oms/blog/content/view?id='+ row.id + '"  >',
            '	<i class="glyphicon glyphicon-check"></i> ',
            '</a>  ',
            '<a class="btn btn-sm btn-warning" title="修改" target="modal" modal="lg" href="${request.contextPath}/oms/blog/content/update?id='+ row.id + '" >',
            '	<i class="glyphicon glyphicon-edit"></i> ',
            '</a>  ',
            '<a class="btn btn-sm btn-danger"  title="删除" callback="articleReload()" data-body="确认要删除吗？" target="ajaxTodo" method="DELETE" href="${request.contextPath}/oms/blog/content/delete?id='+ row.id + '">'
			+'	<i class="glyphicon glyphicon-remove"></i>'
            + '</a>&nbsp;'
        ].join('');
    }
</script>